import React from 'react';

// 引入页头组件
import Pageheader from '@/components/Pageheader';
import { Button, Table, Tag, Space, message } from 'antd';
import { useEffect, useState, useRef } from 'react';
// 引入模态框组件
import Mymodal from '@/components/Mymodal';
// 引入用户相关接口
import { getuserlist, deluserFn } from '@/api/user';
// 引入分页组件
import Mypagniation from '@/components/Mypagniation';
// 这是定义列
const Index = () => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'id', // 表示该列在数据中对应哪一个字段
            key: 'id', // 唯一索引
            render: (text) => <a>{text}</a>,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'id',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'id',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'id',
        },
        {
            title: '性别',
            key: 'id',
            dataIndex: 'gender',
            render: (tags) => {
                // tags 就是该列数据对象中对应gender的value值
                let color = tags;
                let sex = '男'
                switch (color) {
                    case '1':
                        color = 'error'
                        sex = '男'
                        break;
                    case '2':
                        color = 'success'
                        sex = '女'
                        break;
                    default:
                        color = 'warning'
                        sex = '保密'
                        break;
                }

                return <Tag color={color}>
                    {sex}
                </Tag>
            }
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                // tags 就是该列数据对象中对应gender的value值
                return <Tag color={tags == 1 ? 'success' : 'error'}>
                    {tags == 1 ? '正常' : '禁用'}
                </Tag>
            }
        },
        {
            title: '操作',
            key: 'id',
            render: (_, record) => (
                <Space size="middle">
                    <Button type='primary' onClick={() => editUserFn(record)} >编辑</Button>
                    <Button type='primary' danger onClick={() => deleteUserFn(record)} >删除</Button>
                </Space>
            ),
        },
    ];
    // 定义用户列表数据请求
    const [page, setPage] = useState(1);
    const [userlist, setuserlist] = useState([]);
    // 设置总的数据条数
    const [total, setTotal] = useState(0)
    useEffect(() => {
        // 初始化请求用户列表数据
        getuserlistFn({ page });
    }, [page])

    // 请求用户列表
    const getuserlistFn = (params) => {
        getuserlist(params).then(res => {
            console.log('用户列表数据', res);
            if (res.data.errNo == 0) {
                setuserlist(res.data.paginate.data)
                setTotal(res.data.paginate.total)
            }
        })
    }
    // 添加功能
    const ref1 = useRef()
    const addUserFn = () => {
        //01: 显示模态框
        ref1.current.showModal()
        // console.log('ref1', ref1)
        //02: 修改模态框标题
        ref1.current.setTitle('添加')
    }

    // 编辑用户
    const editUserFn = (record) => {
        //01: 显示模态框
        ref1.current.showModal()
        //02: 修改模态框标题
        ref1.current.setTitle('编辑')
        //03: 进行数据的回填
        console.log('record', record);
        ref1.current.setCurrentUser(record)

    }

    // 删除用户
    const deleteUserFn = (record) => {
        // console.log('reord', record);
        deluserFn(record).then(res => {
            if (res.data.errNo == 0) {
                message.success('删除成功', 1, () => {
                    // 重新请求用户列表
                    getuserlistFn({ page })
                })
            } else {
                message.error(res.data.errText, 1)
            }

        })
    }
    return (
        <div>
            {/* 页头标签 */}
            <Pageheader title='用户列表'>
                <Button type='primary' onClick={addUserFn}>添加</Button>
            </Pageheader>
            {/* 展示表格数据 */}
            <Table
                columns={columns}
                pagination={false}
                dataSource={userlist}
                rowKey={(record) => record.id}
            />
            {/* 模态框组件 */}
            <Mymodal ref={ref1} getuserlistFn={getuserlistFn} page={page}></Mymodal>
            {/* 分页组件 */}
            <Mypagniation page={page} total={total} setPage={setPage}></Mypagniation>
        </div>
    );
}

export default Index;
